<template>
  <el-card class="box-card" shadow="never">
    <div slot="header" class="clearfix">
      <div class="head-container">
        <div class="table_title">{{ currentPatient.patientName }}</div>
        <div class="filter-item">
          {{ getLabel(currentPatient.gender, GENDET_LIST) }}
        </div>
        <div class="filter-item">{{ currentPatient.age }}</div>
        <div class="filter-item">
          {{
            currentPatient.patientType === 1
              ? currentPatient.outpatientNum
              : currentPatient.patientType === 2
              ? currentPatient.admissionNum
              : currentPatient.outpatientNum || currentPatient.admissionNum
          }}
        </div>
        <div class="head-btn">
          <el-button type="primary" size="mini" @click="clickBack">
            返回
          </el-button>
        </div>
      </div>
      <div class="head-container">
        <div class="filter-item">
          <span>收费状态：</span>
          <el-select
            v-model="query.chargeStates"
            class="filter-item"
            placeholder="全部"
            clearable
            style="width: 100px"
            @change="crud.toQuery"
          >
            <el-option
              v-for="item in CHARGE_STATE_LIST"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="filter-item">
          <span>计费时间：</span>
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator=":"
            size="small"
            style="width: 230px"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="dateRangeChange"
          />
        </div>
      </div>
    </div>
    <el-table
      ref="table"
      v-loading="crud.loading"
      :data="crud.data[crud.listName]"
      highlight-current-row
      @current-change="handleCurrentChange"
    >
      <el-table-column label="序号" width="60px" prop="indexNumber">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="序号" prop="index" /> -->
      <el-table-column label="状态" prop="chargeStates">
        <template slot-scope="scope">
          {{ getLabel(scope.row.chargeStates, CHARGE_STATE_LIST) }}
        </template>
      </el-table-column>
      <el-table-column label="项目名称" prop="treatmentName" />
      <el-table-column label="计费日期" prop="billTime" width="160px">
        <template slot-scope="scope">
          {{
            scope.row.billTime
              ? moment(scope.row.billTime).format("YYYY-MM-DD HH:mm:ss")
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column label="费用名称" prop="costName" />
      <el-table-column label="开单医生" prop="applyDoctor" />
      <el-table-column label="开单科室" prop="applyDepartmentName" />
      <el-table-column label="执行科室" prop="exeDepartmentName" />
      <el-table-column label="执行医生" prop="exeDoctor" />
    </el-table>
  </el-card>
</template>
<script>
import CRUD, { presenter, header, form, crud } from "@crud/crud";
import { CHARGE_STATE_LIST, getLabel, GENDET_LIST } from "./enums";
import moment from "moment";
import Cookies from "js-cookie";
const defaultForm = { type: undefined };
export default {
  name: "HighPressureOxygenCost",
  components: {},
  cruds() {
    return CRUD({
      title: "费用列表",
      url: "admin/therapists/bill/list",
      optShow: {
        reset: false,
        add: true,
        edit: false,
        del: false,
        download: false,
        opts: true,
      },
      idField: "index",
      props: {
        pageIndexKey: "page",
        pageSizeKey: "size",
      },
      query: {
        patientId: undefined,
        reservationId: undefined,
        chargeStates: undefined,
        billTimeBegin: undefined,
        billTimeEnd: undefined,
      },
      queryOnPresenterCreated: false,
    });
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  computed: {
    currentPatient() {
      const info = Cookies.get("currentPatient");
      try {
        return info ? JSON.parse(info) : {};
      } catch (res) {
        return {};
      }
    },
  },
  data() {
    return {
      GENDET_LIST,
      CHARGE_STATE_LIST,
      permission: {
        edit: ["admin", "dic/edit"],
      },
      currentRow: null,
      dateRange: [],
    };
  },
  created() {
    this.crud.query.patientId = this.currentPatient.patientId;
    this.crud.query.reservationId = this.currentPatient.reservationId;
    this.crud.toQuery();
  },
  methods: {
    moment,
    getLabel,
    dateRangeChange(e) {
      if (Array.isArray(e) && e.length === 2) {
        const [billTimeBegin, billTimeEnd] = e;
        Object.assign(this.crud.query, {
          billTimeBegin,
          billTimeEnd,
        });
      } else {
        Object.assign(this.crud.query, {
          billTimeBegin: undefined,
          billTimeEnd: undefined,
        });
      }
      this.crud.toQuery();
    },
    toSign(e) {
      console.log(e);
    },
    handleCurrentChange(val) {
      this.$emit("change", val);
    },
    [CRUD.HOOK.afterRefresh](crud) {
      if (crud.data && crud.data.content && crud.data.content.length) {
        if (this.currentRow) {
          const existRow = crud.data.content.find(
            (row) => row.dicId === this.currentRow.dicId
          );
          if (!existRow) {
            this.$emit("change", crud.data.content[0]);
          }
        } else {
          this.$emit("change", crud.data.content[0]);
        }
      }
    },
    clickBack() {
      this.$router.back();
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/.crud-opts {
  display: inline-flex;
}

.table_title {
  display: inline-block;
  line-height: 30px;
  margin: 0 10px 0 0;
  vertical-align: middle;
  font-weight: bold;
  color: #303133;
  font-size: 15px;
}

.head-container {
  line-height: 30.5px;
  padding-bottom: 0;

  /deep/.filter-item {
    margin-bottom: 0;
    margin-right: 20px;
  }

  .head-btn {
    display: inline-block;
    float: right;
  }
}
</style>
